<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>

        <el-button
          style="float: right; margin-right: 15px"
          @click="addDialogVisible = true"
          size="small"
          type="success"
        >
          新增
        </el-button>
      </div>

      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="searchServiceList"
          size="small"
          label-width="140px"
        >
          <el-form-item label="服务名称:">
            <el-input
              style="width: 203px"
              v-model="searchServiceList.name"
              placeholder="请输入要搜索的服务名称"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="服务标签:">
            <el-select
              style="width: 203px"
              v-model="searchServiceList.labelId"
              placeholder="请选择服务标签"
              clearable
            >
              <el-option
                v-for="(item, index) in serviceNameOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="计费方式:">
            <el-select
              v-model="searchServiceList.chargeMode"
              style="width: 203px"
              placeholder="请选择要搜索的计费方式"
              clearable
            >
              <!-- <el-option label="" value=""></el-option> -->
              <el-option label="按次数计费" value="NUMS"></el-option>
              <el-option label="按时长计费" value="Times"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务状态:">
            <el-select
              v-model="searchServiceList.status"
              style="width: 203px"
              placeholder="请选择要搜索的服务状态"
              clearable
            >
              <!-- <el-option label="" value=""></el-option> -->
              <el-option label="下架" value="OFF"></el-option>
              <el-option label="上架" value="ON"></el-option>
              <!-- <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option> -->
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-dialog title="添加服务" :visible.sync="addDialogVisible" width="60%">
      <span>
        <el-card class="filter-container" shadow="never">
          <div style="margin-top: 15px">
            <el-form
              :rules="serviceRules"
              ref="addServie"
              :inline="true"
              :model="addServie"
              size="small"
              label-width="140px"
            >
              <el-form-item label="计费方式:" prop="chargeMode">
                <el-select
                  v-model="addServie.chargeMode"
                  style="width: 203px"
                  placeholder="请选择计费方式"
                  clearable
                >
                  <el-option label="按次数计费" value="NUMS"></el-option>
                  <el-option label="按时长计费" value="Times"></el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="公司ID:" prop="companyId">
                <el-input
                  style="width: 203px"
                  v-model="addServie.companyId"
                  placeholder="请输入公司ID"
                  clearable
                ></el-input>
              </el-form-item> -->

              <el-form-item label="服务标签:" prop="labelId">
                <el-select
                  style="width: 203px"
                  v-model="addServie.labelId"
                  placeholder="请选择服务标签"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in serviceNameOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="服务名称:" prop="name">
                <el-input
                  style="width: 203px"
                  v-model="addServie.name"
                  placeholder="请输入服务名称"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="单价:" prop="price">
                <el-input
                  style="width: 203px"
                  v-model="addServie.price"
                  placeholder="请输入单价"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="服务状态:" prop="status">
                <el-select
                  v-model="addServie.status"
                  style="width: 203px"
                  placeholder="请选择服务状态"
                  clearable
                >
                  <el-option label="下架" value="OFF"></el-option>
                  <el-option label="上架" value="ON"></el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item prop="minChargeNume" label="最低消费数量:">
                <el-input
                  style="width: 203px"
                  v-model="addServie.minChargeNume"
                  placeholder="请输入服务的最低消费数量"
                  clearable
                ></el-input>
              </el-form-item> -->
            </el-form>
          </div>
        </el-card>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddList()">确 定</el-button>
      </span>
    </el-dialog>

    <el-card style="margin-top: 15px" class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div style="margin-top: 15px" class="table-container">
      <el-table
        :data="ServiceList"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="服务ID" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <!-- <el-table-column label="公司ID" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.companyId }}</template>
        </el-table-column> -->
        <el-table-column label="服务名称" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="服务标签ID" width="150" align="center">
          <template slot-scope="scope">
            {{ getServiceName(scope.row.labelId) }}
          </template>
        </el-table-column>
        <el-table-column label="计费方式" width="150" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.chargeMode == 'NUMS'"
              >按次数计费</el-tag
            >
            <el-tag type="success" v-else-if="scope.row.chargeMode == 'Times'"
              >按时长计费</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="单价" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.price }}</template>
        </el-table-column>
        <!-- <el-table-column label="服务最低消费数量" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.minChargeume }}</template>
        </el-table-column> -->
        <el-table-column label="状态" width="150" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.status == 'ON'">上架</el-tag>
            <el-tag type="info" v-else-if="scope.row.status == 'OFF'"
              >下架</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              size="mini"
              type="success"
              @click="
                (messageEditDialogVisible = true), showMessageData(scope.$index)
              "
              >编辑
            </el-button>

            <!-- 状态修改按钮 -->
            <el-button
              size="mini"
              type="primary"
              @click="
                (statusEditDialogVisible = true),
                  showStatusData(scope.$index, scope.row)
              "
              >状态修改
            </el-button>
            <!-- 删除按钮 -->
            <el-button
              size="mini"
              type="warning"
              @click="handleDeleteList(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 服务状态编辑弹窗 -->
      <el-dialog
        title="服务状态编辑"
        :visible.sync="statusEditDialogVisible"
        width="35%"
      >
        <span>
          <el-card class="filter-container" shadow="never">
            <div style="margin-top: 15px">
              <el-form
                :rules="editStatusRules"
                ref="editStatus"
                :inline="true"
                :model="editStatus"
                size="small"
                label-width="140px"
              >
                <el-form-item label="服务状态:">
                  <el-select
                    v-model="editStatus.status"
                    style="width: 203px"
                    placeholder="请选择服务状态"
                    clearable
                  >
                    <!-- <el-option label="" value=""></el-option> -->
                    <el-option label="下架" value="OFF"></el-option>
                    <el-option label="上架" value="ON"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="statusEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleEditStatus()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!--  -->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-count="pageCunt"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="修改服务相关信息"
      :visible.sync="messageEditDialogVisible"
      width="60%"
    >
      <span>
        <el-card class="filter-container" shadow="never">
          <div style="margin-top: 15px">
            <el-form
              :rules="serviceRules"
              ref="editMessage"
              :inline="true"
              :model="editMessage"
              size="small"
              label-width="140px"
            >
              <el-form-item label="计费方式:" prop="chargeMode">
                <el-select
                  v-model="editMessage.chargeMode"
                  style="width: 203px"
                  placeholder="请选择计费方式"
                  clearable
                >
                  <!-- <el-option label="" value=""></el-option> -->
                  <el-option label="按次数计费" value="NUMS"></el-option>
                  <el-option label="按时长计费" value="Times"></el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="公司ID:" prop="companyId">
                <el-input
                  style="width: 203px"
                  v-model="editMessage.companyId"
                  placeholder="请输入公司ID"
                  clearable
                ></el-input>
              </el-form-item> -->

              <!-- <el-form-item label="服务ID:">
                <el-input
                  style="width: 203px"
                  v-model="editMessage.id"
                  placeholder="ID"
                  clearable
                ></el-input>
              </el-form-item> -->

              <el-form-item label="服务标签:" prop="labelId">
                <el-select
                  style="width: 203px"
                  v-model="editMessage.labelId"
                  placeholder="请选择服务标签"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in serviceNameOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="服务名称:" prop="name">
                <el-input
                  style="width: 203px"
                  v-model="editMessage.name"
                  placeholder="请输入服务名称"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="服务单价:" prop="price">
                <el-input
                  style="width: 203px"
                  v-model="editMessage.price"
                  placeholder="请输入单价"
                  clearable
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="messageEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditMessage()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "serviceManage",
  data() {
    return {
      //   表：搜索条件
      searchServiceList: {
        name: "",
        labelId: "",
        chargeMode: "",
        status: "",
        pageNum: "1",
        pageSize: "5",
      },
      //   表：当前页数据
      currentPage: 1,
      currentServiceList: {
        pageNum: "1",
        pageSize: "5",
      },
      // 表：数据
      ServiceList: [
        {
          id: "",
          companyId: "",
          labelId: "",
          name: "",
          chargeMode: "",
          price: null,
          status: "",
        },
      ],
      //   表：增加服务信息
      addServie: {
        chargeMode: "",
        companyId: "",
        labelId: "",
        name: "",
        price: null,
        status: "",
        // minChargenum: "",
      },
      // 表：编辑服务信息
      editMessage: {
        chargeMode: "",
        companyId: "",
        id: "",
        labelId: "",
        name: "",
        price: null,
        status: "",
        // minChargenum: "",
      },
      // 表：编辑状态信息
      editStatus: {
        id: "",
        status: "",
      },
      //   表：状态类别
      // statusOptions: [
      //   { value: "0", label: "上架" },
      //   { value: "1", label: "下架" },
      // ],
      //   表：计费方式类别
      chargeOptions: [
        { value: "0", label: "按次数计费" },

        { value: "1", label: "按时长计费" },
      ],
      //   表：服务名称，
      //   需要从系统端的标签表获取名称
      serviceNameOptions: [{ name: "", id: "", status: "" }],
      listLoading: true,
      // isAdd: true,
      // isEdit: true,
      addDialogVisible: false, //服务信息新增
      messageEditDialogVisible: false, //服务信息编辑
      pageCunt: 1,
      statusEditDialogVisible: false, //服务状态编辑
      serviceRules: {
        chargeMode: [
          { required: true, message: "请选择计费标准", trigger: "blur" },
        ],
        companyId: [
          { required: true, message: "请输入公司Id", trigger: "blur" },
        ],
        labelId: [
          { required: true, message: "请选择服务标签", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
          { min: 2, message: "名称至少包含两个字符", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入单价", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "" || !isNaN(value)) {
                callback();
              } else {
                callback(new Error("单价必须为数字类型"));
              }
            },
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "请选择服务状态", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getserviceNameOptions();
  },
  computed: {
    // 计算属性：将服务标签ID转换为对应的服务名称
    getServiceName() {
      return (labelId) => {
        const matchingService = this.serviceNameOptions.find(
          (service) => service.id == labelId
        );
        return matchingService ? matchingService.name : "";
      };
    },
  },
  methods: {
    // 获取列表信息
    getList() {
      this.listLoading = true;
      this.axios
        .get("api/company/auth/server/list", {
          params: this.currentServiceList,
        })
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.ServiceList = response.data.value.data;
            // console.log(this.ServiceList);
            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            // this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 搜索
    handleSearchList() {
      this.listLoading = true;
      console.log(this.searchServiceList.name);
      console.log(this.searchServiceList.chargeMode);
      this.axios
        .get("api/company/auth/server/list", {
          params: this.searchServiceList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.ServiceList = response.data.value.data;
            var pcnt = response.data.value.total / 5;
            if (pcnt > Number.parseInt(pcnt)) {
              this.pageCunt = Number.parseInt(pcnt) + 1;
            } else {
              this.pageCunt = Number.parseInt(pcnt);
            }
            // this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 重置搜索条件
    handleResetSearch() {
      this.searchServiceList = {
        name: "",
        labelId: "",
        chargeMode: "",
        status: "",
        pageNum: "1",
        pageSize: "5",
      };
    },
    // 换页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentServiceList.pageNum = val;
      this.axios
        .get("api/company/auth/server/list", {
          params: this.currentServiceList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.ServiceList = response.data.value.data;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 新增服务信息
    handleAddList() {
      this.$refs.addServie.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认是否添加").then(() => {
            this.axios
              .post(
                "/api/company/auth/server/insert?chargeMode=" +
                  this.addServie.chargeMode +
                  // "&companyId=" +
                  // this.addServie.companyId +
                  "&labelId=" +
                  this.addServie.labelId +
                  "&name=" +
                  this.addServie.name +
                  "&price=" +
                  this.addServie.price +
                  "&status=" +
                  this.addServie.status
              )
              .then((response) => {
                if (response.data.code == "200") {
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.getList();
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("添加失败");
              });
          });
          this.addDialogVisible = false;
        } else {
          this.$message.error("请填写带*字段并按照要求填写");
        }
      });
    },
    // 获取服务列表
    getserviceNameOptions() {
      this.axios
        .get("/api/company/auth/label/getByCompany")
        .then((response) => {
          if (response.data.code == "200") {
            // this.ServiceList = response.data.value.data;
            this.serviceNameOptions = response.data.value;
            this.serviceNameOptions = this.serviceNameOptions.filter(function (
              item
            ) {
              if (item.status == "NORMAL") return item;
            });
            // console.log(response);
          } else {
            this.$message.error(response.data.message);
          }
          // this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          // this.listLoading = false;
        });
    },
    //展示编辑信息
    showMessageData(index) {
      this.editMessage = { ...this.ServiceList[index] };
    },
    // 提交编辑服务信息
    handleEditMessage() {
      this.$refs.editMessage.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认是否选择修改").then((_) => {
            this.axios
              .post(
                "/api/company/auth/server/update?chargeMode=" +
                  this.editMessage.chargeMode +
                  // "&companyId=" +
                  // this.editMessage.companyId +
                  "&id=" +
                  this.editMessage.id +
                  "&labelId=" +
                  this.editMessage.labelId +
                  "&name=" +
                  this.editMessage.name +
                  "&price=" +
                  this.editMessage.price +
                  "&status=" +
                  this.editMessage.status
              )
              .then((response) => {
                if (response.data.code == "200") {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.getList();
                  this.messageEditDialogVisible = false;
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("修改失败");
              });
          });
        } else {
          this.$message.error("请填写带*字段并按照要求填写");
        }
      });

      // this.messageEditDialogVisible = false;
    },
    // 删除
    handleDeleteList(row) {
      console.log(row.id);
      this.$confirm("请再次确认是否删除").then(() => {
        this.axios
          .post("/api/company/auth/server/delete?id=" + row.id)
          .then((response) => {
            console.log(response);
            if (response.data.code == "200") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error("删除失败");
          });
      });
    },
    // 状态编辑
    handleEditStatus() {
      this.$confirm("请再次确认是否选择修改").then(() => {
        this.axios
          .post(
            "/api/company/auth/server/update?id=" +
              this.editStatus.id +
              "&status=" +
              this.editStatus.status
          )
          .then((response) => {
            if (response.data.code == "200") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.getList();
              this.statusEditDialogVisible = false;
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error("修改失败");
          });
      });
    },
    // 关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 状态
    showStatusData(index) {
      this.editStatus = { ...this.ServiceList[index] };
    },
    // 状态修改
  },
};
</script>
<style></style>
